<template>
  <div class="messages-outside-box">
    <div class="messages-inside-box">
      <h3>留言</h3>
      <div>
        <!-- 这里是留言 -->
        <div class="chat-box" v-for="remark in remarks" :key="remark.rmkId">
          <div class="remark-box">
            <label class="msg-user">{{ remark.rmkUser }}:</label>
            {{ remark.rmkContent }}
          </div>
          <div class="replys" v-for="reply in remark.replys" :key="reply.rpyId">
            <!-- 字体变成14号试一试 -->
            <div class="reply">
              <label class="msg-user">{{ reply.rpyUser }}:</label>
              {{ reply.rpyContent }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.messages-outside-box {
  width: 290px;
  height: 290px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 8px;
}

.messages-inside-box {
  padding: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  height: 270px;
  overflow: auto;
}

.chat {
  min-height: 10px;
  color: black;
}

.chat-box {
  text-align: left;
  padding: 5px;
  border-radius: 2px;
  background-color: #67c23a17;
  margin-bottom: 10px;
}

.remark-box {
  text-align: left;
}

.msg-user {
  color: #0f84e4;
  font-size: 18px;
}

.replys {
  font-size: 16px;
  padding-left: 20px;
  text-align: left;
}

.reply {
  font-size: 16px;
}

.reply .msg-user {
  color: #3e99e4;
  font-size: 16px;
}

.reply-box {
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: 3px;
  background-color: rgb(245, 245, 245);
  box-shadow: 0 0 2px darkgray inset;
  text-align: left;
  font-size: 14px;
}
</style>

<script>
export default {
  name: "TinyMessages",
  data() {
    return {
      remarks: [
        {
          rmkId: "1",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa"
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb"
            }
          ]
        },
        {
          rmkId: "2",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa"
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb"
            }
          ]
        }
      ]
    };
  },
  created: function() {
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/remarkAndReply",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 0
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        that.remarks = res.data.remarks;
      },
      function(res) {
        console.log(res);
        console.log("啊呀，TinyMessages-showMessages出错啦");
      }
    );
  }
};
</script>